<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			window.onload=function()
			{
				var j=0
				var btn=document.getElementById("btn")
				
				btn.onclick=function()
				{ 
					var box1=document.getElementById("one")
					j=j+100
					box1.style.left=j+"px"
				}
				
				var btn1=document.getElementById("btn1")
				
				btn1.onclick=function()
				{ 
					var box1=document.getElementById("one")
					j=j-100
					box1.style.left=j+"px"
				}
				var btn2=document.getElementById("btn2")
				
				btn2.onclick=function()
				{ 
					var box1=document.getElementById("one")
					j=j-100
					box1.style.top=j+"px"
				}
				var btn3=document.getElementById("btn3")
				
				btn3.onclick=function()
				{ 
					var box1=document.getElementById("one")
					j=j+100
					box1.style.top=j+"px"
				}
				//var box1=document.getElementById("one")
			  //box1.style.left="100px"
				
				
             
				
			}
		</script>
	</head>
	<body>
		<button id="btn1" type="button">向左</button>
		<button id="btn" type="button">向右</button>
		<button id="btn2" type="button">向上</button>
		<button id="btn3" type="button">向下</button>
		<div id="one" style="width: 200px; height: 200px; background-color: red; position: absolute;">
			
		</div>
	</body>
</html>
